<template>
  <div>
    <image-menu
      v-if="contextType == 'image'"
      @changeImageSize="changeImageSize"
      :editIndex="editIndex"
      @imageMenuMounted="imageMenuMounted"
    ></image-menu>
    <table-menu
      v-if="contextType == 'table'"
      :tapTd="tapTd"
      :tapTr="tapTr"
      @select="select"
      :tapIndex="tapIndex"
      :editIndex="editIndex"
      @tableMenuMounted="tableMenuMounted"
      @setStyle="setStyle"
    ></table-menu>
    <mtPopUp v-if="editWidthHeightPopup"
    @close="handleClose"
    @confirm="handleConfirm"
    >
      <div class="mt-flex-row">
          <div class="mt-flex-item">
            <span class="item-title">宽度</span>
            <select v-model="width" class="mt-input">
              <template v-for="item in 100">
                <option  :key="item" v-if="item%10===0">{{item}}%</option>
              </template>
            </select>
          </div>
          <div class="mt-flex-item">
            <span class="item-title">高度</span>
            <input type="text" v-model="height" size="10" class="mt-input">
          </div>
      </div>
    </mtPopUp>
  </div>
</template>

<script>
import imageMenu from './imageMenu';
import tableMenu from './TableMenu'
import mtPopUp from '../components/popup'
export default {
  props: {
    editIndex: {
      type: Number,
      default: 0
    }
  },
  components: { imageMenu, tableMenu, mtPopUp},
  data () {
    return {
      contextType: 'div',
      tapTd: {},//右键选中元素的
      tapIndex: 0,//选中的元素的下标
      tapTr: {},
      rowIndex: 0,
      imgTarget: {},
      position: { x: 0, y: 0 },
      scrollTop: 0,
      editWidthHeightPopup: false,
      width: '',
      height: '30',
      widthOptions: []
    }
  },
  methods: {
    handleConfirm() {
      console.log(this.tapTd)
      let td = this.tapTd
      td.style.width = this.width
      td.style.height = this.height+'px'
      this.$parent.selectMenu()
      this.handleClose()
    },
    handleClose() {
      this.width = '',
      this.height = '30px',
      this.editWidthHeightPopup = false
    },
    setStyle () {
      this.editWidthHeightPopup = true
    },
    select(){
      this.$parent.selectMenu()
      this.contextType = 'div'
    },
    changeImageSize (imageSize) {
      this.imgTarget.style.width = imageSize.imageWidth == 0 ? 'auto' : imageSize.imageWidth + '%';
      this.imgTarget.style.height = imageSize.imageHeight == 0 ? 'auto' : imageSize.imageHeight + '%';
    },
    getScrollTop(){
      this.contextType = ''
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.scrollTop = scrollTop
    },
    getMousePosition (ev) {
      var event = ev || window.event;
      var posX = 0, posY = 0;
      if (event.pageX || event.pageY) {
        posX = event.pageX;
        posY = event.pageY - this.scrollTop;
      } else if (event.clientX || event.clientY) {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop
      }
      return { x: posX, y: posY }
    },
    tableMenuMounted () {
      //  var tableContextMenu = document.getElementById('mtEditorTableMenu'+this.editIndex);
      // console.log('表格弹框创建完成了', tableContextMenu)
      var _this = this
      var tableContextMenu = document.getElementById('mtEditorTableMenu'+this.editIndex);
        document.oncontextmenu = function () {
          //一定要加px，要不然chrom不认
          tableContextMenu.style.position = "fixed";
          tableContextMenu.style.top = _this.position.y + 'px';
          tableContextMenu.style.left = _this.position.x + 'px';
          tableContextMenu.style.display = 'block';
          return false;
        }
        document.onclick = function () {
          tableContextMenu.style.display = 'none';
        }
    },
    imageMenuMounted () {
      var _this = this
      var contextmenu = document.getElementById('mteditorImageMenu'+this.editIndex);
        document.oncontextmenu = function () {
          //一定要加px，要不然chrom不认
          contextmenu.style.position = "fixed";
          contextmenu.style.top = _this.position.y + 'px';
          contextmenu.style.left = _this.position.x + 'px';
          contextmenu.style.display = 'block';
          return false;
        }
        document.onclick = function () {
          contextmenu.style.display = 'none';
        }
    }
  },
  watch: {
    contextType () {
      document.oncontextmenu = function () {
          return true;
      }
    }
  },
  mounted () {
    document.addEventListener('scroll', this.getScrollTop)
    document.onmousedown = (e)=>{
      switch (e.button) {
        case 2: {
          let className = e.target.className
          if (className !== 'inertImage' && className !== 'mtTableTd') {
            this.contextType = ''
          }
        }
        break
      }
    }
    var richEdit = this.$parent.$refs['richEdit'];
    richEdit.onmousedown = (e) => {
      var tagName = e.target.tagName;
      // _this.$set(_this, 'poistion', position)
      this.position = { x: 0, y: 0 }
      this.contextType = ''
      switch (e.button) {
        case 2: {        
            let position = this.getMousePosition(e)
            this.position = position
            if (tagName === 'IMG') {
              this.contextType = "image";
              this.imgTarget = e.target;
            } else if (tagName === "TD") {
              this.contextType = "table";
              this.tapTd = e.target;
              this.tapTr = e.target.parentElement;
              this.tapIndex = Array.from(this.tapTr.children).indexOf(e.target);
            } else {
              this.contextType = "div";
            }
            break;
          }
      }
    }
  },
}
</script>

<style scoped>
.mt-flex-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 10px;
   box-sizing: border-box;
}
.mt-flex-item {
  margin-left: 20px;
}
.item-title {
  margin-right: 10px;
}
.mt-input {
  padding: 5px;
}
</style>
